<template>
  <view class="container">
    <!-- 顶部标题栏 -->
    <view class="top-bar">
		<text></text>
      <text class="page-title">全部应用</text>
      <image class="search-icon" src="/static/ri_search-line.png"></image>
    </view>

    <!-- 常用工具区域 -->
    <view class="common-tools-section">
      <view class="tools-header">
        <text class="section-title">常用工具</text>
        <text class="add-common">（可按住拖拽管理顺序）</text>
      </view>
      <view class="common-tools-grid">
        <view class="tool-item" v-for="(tool, index) in commonTools" :key="index" @click="geturl(tool.url)">
          <image class="tool-icon" :src="tool.icon"></image>
          <text class="tool-name">{{ tool.name }}</text>
        </view>
      </view>
<!--      <view class="add-common-btn">
		 <view> <image class="add-icon" src="/static/manage/Group_427319329@2x.png"></image> </view> 
        <text class="add-text">添加常用</text>
        
      </view> -->
    </view>

    <!-- 可滑动分类标签 -->
    <scroll-view class="category-tabs" scroll-x enable-flex>
      <view 
        class="category-tab" 
        v-for="(category, index) in categories" 
        :key="index"
        :class="{ 'active': activeCategory === index }"
        @click="switchCategory(index)"
      >
        <text class="tab-text">{{ category.name }}</text>
      </view>
    </scroll-view>

    <!-- 功能列表区域 -->
    <view class="function-list-section">
      <!-- 数据分析 -->
      <view class="function-category">
        <view class="category-header">
          <text class="category-title">数据分析</text>
        </view>
        <view class="function-grid">
          <view class="function-item" v-for="(item, index) in dataAnalysisItems" :key="index">
            <image class="function-icon" :src="item.icon"></image>
            <text class="function-name">{{ item.name }}</text>
          </view>
        </view>
      </view>
  </view>
  <view class="function-list-section">
      <!-- 商品管理 -->
      <view class="function-category">
        <view class="category-header">
          <text class="category-title">商品管理</text>
        </view>
        <view class="function-grid">
          <view class="function-item" v-for="(item, index) in productManagementItems" :key="index">
            <image class="function-icon" :src="item.icon"></image>
            <text class="function-name">{{ item.name }}</text>
          </view>
        </view>
      </view>
	   </view>
  <view class="function-list-section">
      <!-- 台桌包厢及助教 -->
      <view class="function-category">
        <view class="category-header">
          <text class="category-title">台桌包厢及助教</text>
        </view>
        <view class="function-grid">
          <view class="function-item" v-for="(item, index) in tableBoothItems" :key="index">
            <image class="function-icon" :src="item.icon"></image>
            <text class="function-name">{{ item.name }}</text>
          </view>
        </view>
      </view>
	   </view>
  <view class="function-list-section">
      <!-- 订单管理 -->
      <view class="function-category">
        <view class="category-header">
          <text class="category-title">订单管理</text>
        </view>
        <view class="function-grid">
          <view class="function-item" v-for="(item, index) in orderManagementItems" :key="index">
            <image class="function-icon" :src="item.icon"></image>
            <text class="function-name">{{ item.name }}</text>
          </view>
        </view>
      </view>
   </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        activeCategory: 0,
        commonTools: [
          {
            name: "员工管理",
            icon: "/static/manage/guanli_1@2x.png",
			      url:'/pages/employeelist/employeelist'
          },
          {
            name: "岗位管理",
            icon: "/static/manage/guanli_1@2x.png",
			      url:'/pages/joblist/joblist'
          },
          {
            name: "台桌品牌",
            icon: "/static/manage/guanli_1@2x.png",
			      url:'/pages/tablebrand/index'
          },
          {
            name: "台桌类型",
            icon: "/static/manage/guanli_1@2x.png",
			      url:'/pages/tabletype/index'
          },
          {
            name: "区域管理",
            icon: "/static/manage/guanli_1@2x.png",
			      url:'/pages/tablezone/index'
          },
          {
            name: "台桌管理",
            icon: "/static/manage/guanli_1@2x.png",
			      url:'/pages/tabletable/index'
          },
          {
            name: "助教管理",
            icon: "/static/manage/guanli_1@2x.png",
			      url:'/pages/tutor/index'
          },
          {
            name: "订单中心",
            icon: "/static/manage/dingdanzhongxin-2_1@2x.png"
          },
          {
            name: "商品中心",
            icon: "/static/manage/shangpinzhongxin_1@2x.png"
          },
          {
            name: "团购中心",
            icon: "/static/manage/zuzhizhongxin_1@2x.png"
          }
        ],
        categories: [
          {
            name: "数据分析"
          },
          {
            name: "商品管理"
          },
          {
            name: "台桌包厢及助教"
          },
          {
            name: "订单管理"
          }
        ],
        dataAnalysisItems: [
          {
            name: "店铺概况",
            icon: "/static/manage/dianpu_1@2x.png"
          },
          {
            name: "实时销售额",
            icon: "/static/manage/xiaoshouzhutifenxi_1@2x.png"
          },
          {
            name: "经营报表",
            icon: "/static/manage/a-11shouye-jingyingfenxi-jingyingkanban_1@2x.png"
          },
          {
            name: "老板概览",
            icon: "/static/manage/yue_1@2x.png"
          },
          {
            name: "经营指标",
            icon: "/static/manage/texujingyingquan_1@2x.png"
          },
          {
            name: "台位周转率",
            icon: "/static/manage/kongzhitai_zhuomianpeizhi_1@2x.png"
          },
          {
            name: "收银数据报表",
            icon: "/static/manage/shouyisuoyouren 1@2x.png"
          },
          {
            name: "人员销售数据",
            icon: "/static/manage/jiaohuanbanguanli_1@2x.png"
          }
        ],
        productManagementItems: [
          {
            name: "商品管理",
            icon: "/static/manage/cunchuqia-2_1@2x.png"
          },
          {
            name: "商品进货",
            icon: "/static/manage/jinhuodan_1@2x.png"
          },
          {
            name: "商品出货",
            icon: "/static/manage/chuhuo_1@2x.png"
          },
          {
            name: "商品中心",
            icon: "/static/manage/houtai-shangpinzhongxin 1@2x.png"
          },
          {
            name: "商品导入",
            icon: "/static/manage/shangpindaorupeizhi_1@2x.png"
          },
          {
            name: "商品库存",
            icon: "/static/manage/xianchangpancun_1@2x.png"
          }
        ],
        tableBoothItems: [
          {
            name: "商品管理",
            icon: "/static/manage/guanli_2@2x.png",
			      url:'/pages/employeelist/employeelist'
          },
          {
            name: "台位管理",
            icon: "/static/manage/guanli_3@2x.png"
          },
          {
            name: "助教排班",
            icon: "/static/manage/waijiao-zhujiao-zhujiao_1@2x.png"
          },
          {
            name: "助教分组",
            icon: "/static/manage/fenzuguanli_1@2x.png"
          },
          {
            name: "员工试打申请",
            icon: "/static/manage/pr-sy01_1@2x.png"
          },
          {
            name: "员工试打审核",
            icon: "/static/manage/shenhe_1@2x.png"
          },
          {
            name: "助教日程",
            icon: "/static/manage/ri_1@2x.png"
          }
        ],
        orderManagementItems: [
          {
            name: "订单中心",
            icon: "/static/manage/dingdanzhongxin-2_2@2x.png"
          },
          {
            name: "会员订单",
            icon: "/static/manage/huiyuan-2_1@2x.png"
          },
          {
            name: "挂单管理",
            icon: "/static/manage/guazhang_1@2x.png"
          },
          {
            name: "会员支付订单",
            icon: "/static/manage/guazhangguanli_1@2x.png"
          },
          {
            name: "扫码订单",
            icon: "/static/manage/douyinjumuguanli_1@2x.png"
          },
          {
            name: "美团订单",
            icon: "/static/manage/meituantuangou_1@2x.png"
          },
          {
            name: "教练订单",
            icon: "/static/manage/shouyiren_1@2x.png"
          }
        ]
      }
    },
    onLoad() {

    },
    methods: {
		geturl(e,id){
			uni.navigateTo({
				url:e
			})
		},
      switchCategory(index) {
        this.activeCategory = index;
      }
    }
  }
</script>

<style scoped lang="scss">
  .container {
    padding: 0 24rpx 20rpx 24rpx;
    background-color: #F5F5F5;
    min-height: 100vh;
    box-sizing: border-box;
	background-image: url('/static/Group_427319214.png');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	padding-bottom: 200rpx;
  }

  /* 顶部标题栏 */
  .top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 88rpx;
    padding: 0 24rpx;
    // background-color: #FFFFFF;
    margin-bottom: 20rpx;
    // box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  }
  .page-title {
    font-size: 36rpx;
    font-weight: bold;
    color: #333333;
  }
  .search-icon {
    width: 40rpx;
    height: 40rpx;
  }

  /* 常用工具区域 */
  .common-tools-section {
    background: linear-gradient( 180deg, #1EBE76 0%, #FFFFFF 49%);
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    border: 2rpx solid #FFFFFF;
    padding: 20rpx 36rpx;
	box-sizing: border-box;
    margin-bottom: 38rpx;
  }
  .tools-header {
    display: flex;
    align-items: center;
    margin-bottom: 42rpx;
  }
  .section-title {
   font-weight: bold;
   font-size: 28rpx;
   color: #0A2016;
  }
  .add-common {
    font-weight: 400;
    font-size: 24rpx;
    color: #888888;
    margin-left: 12rpx;
  }
  .common-tools-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20rpx;
    margin-bottom: 20rpx;
  }
  .tool-item {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .tool-icon {
    width:52rpx;
    height:52rpx;
    margin-bottom: 10rpx;
  }
  .tool-name {
  font-size: 24rpx;
  color: #333333;
  }
  .add-common-btn {
    // display: flex;
    // align-items: center;
    // justify-content: center;
    height: 60rpx;
    // background-color: #F8F8F8;
    // border-radius: 30rpx;
  }
  .add-text {
    font-size: 24rpx;
    color: #666666;
    margin-right: 8rpx;
  }
  .add-icon {
    width: 52rpx;
    height: 52rpx;
  }

  /* 可滑动分类标签 */
  .category-tabs {
	  box-sizing: border-box;
	  width: 710rpx;
	  // overflow: ;
    display: flex;
    padding: 0 24rpx;
    margin-bottom: 20rpx;
    // background-color: #FFFFFF;
    // border-radius: 16rpx;
    white-space: nowrap;
    height: 88rpx;
    align-items: center;
  }
  .category-tab {
    padding: 12rpx 28rpx;
    margin-right: 16rpx;
    border-radius: 20rpx;
    display: inline-block;
  }
  .category-tab.active {
	  // color: #0A2016;
	  // font-weight: bold;
    // background-color: #E6F7F0;
  }
  .tab-text {
    font-size: 28rpx;
    color: #666666;
  }
  .category-tab.active .tab-text {
    color: #000;
    font-weight: bold;
  }

  /* 功能列表区域 */
  .function-list-section {
    background-color: #FFFFFF;
    border-radius: 16rpx;
    padding: 24rpx;
	box-sizing: border-box;
	margin-bottom: 20rpx;
  }
  .function-category {
    width: 100%;
  }
  .category-header {
    margin-bottom: 24rpx;
  }
  .category-title {
    font-weight: bold;
    font-size: 28rpx;
    color: #0A2016;
  }
  .function-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20rpx;
  }
  .function-item {
	  box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20rpx 0;
  }
  .function-icon {
    width: 52rpx;
	height: 52rpx;
    margin-bottom: 10rpx;
  }
  .function-name {
    font-size: 24rpx;
    color: #333333;
    text-align: center;
  }
</style>